<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理 V3</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义复选框样式 */
        .custom-checkbox {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }
        
        .custom-checkbox input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 18px;
            width: 18px;
            background-color: #fff;
            border: 1px solid #d1d5db;
            border-radius: 4px;
        }
        
        .custom-checkbox input:checked ~ .checkmark {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }
        
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        
        .custom-checkbox input:checked ~ .checkmark:after {
            display: block;
        }
        
        .custom-checkbox .checkmark:after {
            left: 6px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        /* 树形结构样式 */
        .tree-container {
            list-style-type: none;
            padding-left: 0;
        }
        
        .tree-container ul {
            list-style-type: none;
            padding-left: 24px;
        }
        
        .tree-node {
            display: flex;
            align-items: center;
            padding: 6px 0;
        }
        
        .tree-toggle {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .tree-label {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        /* 徽章样式 */
        .badge {
            font-size: 0.75rem;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            margin-left: 8px;
        }
        
        .badge-menu {
            background-color: #e0f2fe;
            color: #0369a1;
        }
        
        .badge-operation {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .badge-data {
            background-color: #dcfce7;
            color: #166534;
        }
        
        /* 右侧面板样式 */
        .right-panel {
            border-left: 1px solid #e5e7eb;
            height: calc(100vh - 180px);
            overflow-y: auto;
        }
        
        /* 选中菜单项样式 */
        .selected-menu {
            background-color: #f3f4f6;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">权限管理</h1>
            <div class="flex space-x-2">
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded flex items-center" onclick="openModal('addMenuModal')">
                    <i class="fas fa-plus mr-2"></i>添加菜单
                </button>
                <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm flex items-center">
                    <i class="fas fa-expand-alt mr-2"></i>展开全部
                </button>
                <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm flex items-center">
                    <i class="fas fa-compress-alt mr-2"></i>折叠全部
                </button>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex items-center mb-4">
                <div class="relative flex-grow">
                    <input id="menuSearch" type="text" class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="搜索菜单...">
                    <div class="absolute left-3 top-2.5 text-gray-400">
                        <i class="fas fa-search"></i>
                    </div>
                </div>
            </div>
            
            <div class="flex">
                <!-- 左侧菜单树 -->
                <div class="w-1/3 pr-4">
                    <h2 class="text-lg font-medium text-gray-700 mb-4">菜单结构</h2>
                    <ul class="tree-container">
                        <!-- 系统管理 -->
                        <li>
                            <div class="tree-node" data-menu-id="system">
                                <span class="tree-toggle" data-target="system-children">
                                    <i class="fas fa-chevron-down"></i>
                                </span>
                                <label class="tree-label">
                                    <span class="custom-checkbox">
                                        <input type="checkbox" class="tree-checkbox parent-checkbox" data-id="system">
                                        <span class="checkmark"></span>
                                    </span>
                                    <span class="font-medium">系统管理</span>
                                    <span class="badge badge-menu">菜单</span>
                                </label>
                            </div>
                            <ul id="system-children">
                                <!-- 角色管理 -->
                                <li>
                                    <div class="tree-node" data-menu-id="role">
                                        <span class="tree-toggle invisible">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                        <label class="tree-label">
                                            <span class="custom-checkbox">
                                                <input type="checkbox" class="tree-checkbox child-checkbox" data-id="role" data-parent="system">
                                                <span class="checkmark"></span>
                                            </span>
                                            <span>角色管理</span>
                                            <span class="badge badge-menu">菜单</span>
                                        </label>
                                    </div>
                                </li>
                                
                                <!-- 权限管理 -->
                                <li>
                                    <div class="tree-node" data-menu-id="permission">
                                        <span class="tree-toggle invisible">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                        <label class="tree-label">
                                            <span class="custom-checkbox">
                                                <input type="checkbox" class="tree-checkbox child-checkbox" data-id="permission" data-parent="system">
                                                <span class="checkmark"></span>
                                            </span>
                                            <span>权限管理</span>
                                            <span class="badge badge-menu">菜单</span>
                                        </label>
                                    </div>
                                </li>
                                
                                <!-- 用户管理 -->
                                <li>
                                    <div class="tree-node" data-menu-id="user">
                                        <span class="tree-toggle invisible">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                        <label class="tree-label">
                                            <span class="custom-checkbox">
                                                <input type="checkbox" class="tree-checkbox child-checkbox" data-id="user" data-parent="system">
                                                <span class="checkmark"></span>
                                            </span>
                                            <span>用户管理</span>
                                            <span class="badge badge-menu">菜单</span>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        
                        <!-- 酒店管理 -->
                        <li>
                            <div class="tree-node" data-menu-id="hotel">
                                <span class="tree-toggle" data-target="hotel-children">
                                    <i class="fas fa-chevron-down"></i>
                                </span>
                                <label class="tree-label">
                                    <span class="custom-checkbox">
                                        <input type="checkbox" class="tree-checkbox parent-checkbox" data-id="hotel">
                                        <span class="checkmark"></span>
                                    </span>
                                    <span class="font-medium">酒店管理</span>
                                    <span class="badge badge-menu">菜单</span>
                                </label>
                            </div>
                            <ul id="hotel-children">
                                <!-- 酒店信息 -->
                                <li>
                                    <div class="tree-node" data-menu-id="hotel-info">
                                        <span class="tree-toggle invisible">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                        <label class="tree-label">
                                            <span class="custom-checkbox">
                                                <input type="checkbox" class="tree-checkbox child-checkbox" data-id="hotel-info" data-parent="hotel">
                                                <span class="checkmark"></span>
                                            </span>
                                            <span>酒店信息</span>
                                            <span class="badge badge-menu">菜单</span>
                                        </label>
                                    </div>
                                </li>
                                
                                <!-- 房间管理 -->
                                <li>
                                    <div class="tree-node" data-menu-id="room">
                                        <span class="tree-toggle invisible">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                        <label class="tree-label">
                                            <span class="custom-checkbox">
                                                <input type="checkbox" class="tree-checkbox child-checkbox" data-id="room" data-parent="hotel">
                                                <span class="checkmark"></span>
                                            </span>
                                            <span>房间管理</span>
                                            <span class="badge badge-menu">菜单</span>
                                        </label>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
                <!-- 右侧权限配置 -->
                <div class="w-2/3 pl-4 right-panel">
                    <div id="no-menu-selected" class="flex flex-col items-center justify-center h-full text-gray-500">
                        <i class="fas fa-hand-point-left text-5xl mb-4"></i>
                        <p class="text-lg">请在左侧选择一个菜单项</p>
                    </div>
                    
                    <!-- 菜单权限配置区域 -->
                    <div id="menu-permission-config" class="hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-lg font-medium text-gray-700" id="selected-menu-title">菜单权限配置</h2>
                            <div class="flex space-x-2">
                                <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-1.5 px-3 rounded text-sm flex items-center" onclick="openModal('addOperationModal')">
                                    <i class="fas fa-plus mr-1"></i>添加操作权限
                                </button>
                                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded text-sm flex items-center" onclick="openModal('addDataModal')">
                                    <i class="fas fa-plus mr-1"></i>添加数据权限
                                </button>
                            </div>
                        </div>
                        
                        <!-- 操作权限列表 -->
                        <div class="mb-6">
                            <h3 class="text-md font-medium text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-cog text-yellow-600 mr-2"></i>操作权限
                            </h3>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">权限名称</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">权限编码</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                            <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200" id="operation-permissions-body">
                                        <!-- 动态生成的操作权限列表 -->
                                    </tbody>
                                </table>
                                <div id="no-operation-permissions" class="text-center py-4 text-gray-500">
                                    暂无操作权限，请点击"添加操作权限"按钮添加
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据权限列表 -->
                        <div>
                            <h3 class="text-md font-medium text-gray-700 mb-2 flex items-center">
                                <i class="fas fa-database text-blue-600 mr-2"></i>数据权限
                            </h3>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">权限名称</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">权限编码</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                            <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200" id="data-permissions-body">
                                        <!-- 动态生成的数据权限列表 -->
                                    </tbody>
                                </table>
                                <div id="no-data-permissions" class="text-center py-4 text-gray-500">
                                    暂无数据权限，请点击"添加数据权限"按钮添加
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加菜单模态框 -->
    <div id="addMenuModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加菜单</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addMenuModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form id="addMenuForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="menuName">菜单名称</label>
                        <input type="text" id="menuName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入菜单名称">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="menuCode">菜单编码</label>
                        <input type="text" id="menuCode" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入菜单编码">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="menuIcon">菜单图标</label>
                        <input type="text" id="menuIcon" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入菜单图标类名">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="menuPath">菜单路径</label>
                        <input type="text" id="menuPath" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入菜单路径">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="parentMenu">父级菜单</label>
                        <select id="parentMenu" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <option value="">无（顶级菜单）</option>
                            <option value="system">系统管理</option>
                            <option value="hotel">酒店管理</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="menuSort">排序</label>
                        <input type="number" id="menuSort" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入排序号" value="1">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center">
                            <input type="radio" id="menuStatusEnable" name="menuStatus" value="1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                            <label for="menuStatusEnable" class="ml-2 block text-sm text-gray-700">启用</label>
                            <input type="radio" id="menuStatusDisable" name="menuStatus" value="0" class="ml-6 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="menuStatusDisable" class="ml-2 block text-sm text-gray-700">禁用</label>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addMenuModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加操作权限模态框 -->
    <div id="addOperationModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加操作权限</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addOperationModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form id="addOperationForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="operationName">权限名称</label>
                        <input type="text" id="operationName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限名称">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="operationCode">权限编码</label>
                        <input type="text" id="operationCode" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限编码">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="operationDesc">权限描述</label>
                        <textarea id="operationDesc" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限描述"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center">
                            <input type="radio" id="operationStatusEnable" name="operationStatus" value="1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                            <label for="operationStatusEnable" class="ml-2 block text-sm text-gray-700">启用</label>
                            <input type="radio" id="operationStatusDisable" name="operationStatus" value="0" class="ml-6 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="operationStatusDisable" class="ml-2 block text-sm text-gray-700">禁用</label>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addOperationModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 添加数据权限模态框 -->
    <div id="addDataModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加数据权限</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addDataModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form id="addDataForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="dataName">权限名称</label>
                        <input type="text" id="dataName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限名称">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="dataCode">权限编码</label>
                        <input type="text" id="dataCode" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限编码">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="dataScope">数据范围</label>
                        <select id="dataScope" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <option value="all">全部数据</option>
                            <option value="dept">本部门数据</option>
                            <option value="deptAndChild">本部门及以下数据</option>
                            <option value="self">仅本人数据</option>
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="dataDesc">权限描述</label>
                        <textarea id="dataDesc" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限描述"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center">
                            <input type="radio" id="dataStatusEnable" name="dataStatus" value="1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" checked>
                            <label for="dataStatusEnable" class="ml-2 block text-sm text-gray-700">启用</label>
                            <input type="radio" id="dataStatusDisable" name="dataStatus" value="0" class="ml-6 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="dataStatusDisable" class="ml-2 block text-sm text-gray-700">禁用</label>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addDataModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑操作权限模态框 -->
    <div id="editOperationModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑操作权限</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('editOperationModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form id="editOperationForm">
                    <input type="hidden" id="editOperationId">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editOperationName">权限名称</label>
                        <input type="text" id="editOperationName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限名称">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editOperationCode">权限编码</label>
                        <input type="text" id="editOperationCode" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限编码">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editOperationDesc">权限描述</label>
                        <textarea id="editOperationDesc" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限描述"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center">
                            <input type="radio" id="editOperationStatusEnable" name="editOperationStatus" value="1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="editOperationStatusEnable" class="ml-2 block text-sm text-gray-700">启用</label>
                            <input type="radio" id="editOperationStatusDisable" name="editOperationStatus" value="0" class="ml-6 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="editOperationStatusDisable" class="ml-2 block text-sm text-gray-700">禁用</label>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('editOperationModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑数据权限模态框 -->
    <div id="editDataModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑数据权限</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('editDataModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form id="editDataForm">
                    <input type="hidden" id="editDataId">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editDataName">权限名称</label>
                        <input type="text" id="editDataName" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限名称">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editDataCode">权限编码</label>
                        <input type="text" id="editDataCode" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限编码">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editDataScope">数据范围</label>
                        <select id="editDataScope" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <option value="all">全部数据</option>
                            <option value="dept">本部门数据</option>
                            <option value="deptAndChild">本部门及以下数据</option>
                            <option value="self">仅本人数据</option>
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="editDataDesc">权限描述</label>
                        <textarea id="editDataDesc" rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入权限描述"></textarea>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div class="flex items-center">
                            <input type="radio" id="editDataStatusEnable" name="editDataStatus" value="1" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="editDataStatusEnable" class="ml-2 block text-sm text-gray-700">启用</label>
                            <input type="radio" id="editDataStatusDisable" name="editDataStatus" value="0" class="ml-6 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                            <label for="editDataStatusDisable" class="ml-2 block text-sm text-gray-700">禁用</label>
                        </div>
                    </div>
                    <div class="flex justify-end mt-6">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('editDataModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            确定
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteConfirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">确认删除</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('deleteConfirmModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2 mb-6">
                <p class="text-gray-700" id="deleteConfirmText">确定要删除该权限吗？删除后将无法恢复。</p>
                <input type="hidden" id="deleteItemId">
                <input type="hidden" id="deleteItemType">
            </div>
            <div class="flex justify-end">
                <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('deleteConfirmModal')">
                    取消
                </button>
                <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" onclick="confirmDelete()">
                    确定删除
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript 代码 -->
    <script>
        // 当前选中的菜单ID
        let currentMenuId = null;
        
        // 操作权限和数据权限数据
        const operationPermissions = {
            'role': [
                { id: 'role:add', name: '添加角色', code: 'role:add', status: 1, desc: '添加新角色的权限' },
                { id: 'role:edit', name: '编辑角色', code: 'role:edit', status: 1, desc: '编辑现有角色的权限' },
                { id: 'role:delete', name: '删除角色', code: 'role:delete', status: 1, desc: '删除角色的权限' },
                { id: 'role:view', name: '查看角色', code: 'role:view', status: 1, desc: '查看角色详情的权限' }
            ],
            'permission': [
                { id: 'permission:add', name: '添加权限', code: 'permission:add', status: 1, desc: '添加新权限的权限' },
                { id: 'permission:edit', name: '编辑权限', code: 'permission:edit', status: 1, desc: '编辑现有权限的权限' },
                { id: 'permission:delete', name: '删除权限', code: 'permission:delete', status: 1, desc: '删除权限的权限' }
            ],
            'user': [
                { id: 'user:add', name: '添加用户', code: 'user:add', status: 1, desc: '添加新用户的权限' },
                { id: 'user:edit', name: '编辑用户', code: 'user:edit', status: 1, desc: '编辑现有用户的权限' },
                { id: 'user:delete', name: '删除用户', code: 'user:delete', status: 0, desc: '删除用户的权限' },
                { id: 'user:resetPwd', name: '重置密码', code: 'user:resetPwd', status: 1, desc: '重置用户密码的权限' }
            ],
            'hotel-info': [
                { id: 'hotel:edit', name: '编辑酒店信息', code: 'hotel:edit', status: 1, desc: '编辑酒店基本信息的权限' },
                { id: 'hotel:upload', name: '上传酒店图片', code: 'hotel:upload', status: 1, desc: '上传酒店图片的权限' }
            ],
            'room': [
                { id: 'room:add', name: '添加房间', code: 'room:add', status: 1, desc: '添加新房间的权限' },
                { id: 'room:edit', name: '编辑房间', code: 'room:edit', status: 1, desc: '编辑房间信息的权限' },
                { id: 'room:delete', name: '删除房间', code: 'room:delete', status: 1, desc: '删除房间的权限' },
                { id: 'room:status', name: '修改房间状态', code: 'room:status', status: 1, desc: '修改房间状态的权限' }
            ]
        };
        
        const dataPermissions = {
            'user': [
                { id: 'user:data:all', name: '所有用户数据', code: 'user:data:all', status: 1, scope: 'all', desc: '查看所有用户数据的权限' },
                { id: 'user:data:dept', name: '部门用户数据', code: 'user:data:dept', status: 1, scope: 'dept', desc: '仅查看本部门用户数据的权限' },
                { id: 'user:data:self', name: '个人用户数据', code: 'user:data:self', status: 1, scope: 'self', desc: '仅查看个人用户数据的权限' }
            ],
            'room': [
                { id: 'room:data:all', name: '所有房间数据', code: 'room:data:all', status: 1, scope: 'all', desc: '查看所有房间数据的权限' },
                { id: 'room:data:dept', name: '部门房间数据', code: 'room:data:dept', status: 1, scope: 'dept', desc: '仅查看本部门房间数据的权限' }
            ]
        };
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化树形菜单的展开/折叠功能
            initTreeToggle();
            
            // 初始化菜单项点击事件
            initMenuClick();
            
            // 初始化表单提交事件
            initFormSubmit();
            
            // 初始化搜索功能
            initSearch();
        });
        
        // 初始化树形菜单的展开/折叠功能
        function initTreeToggle() {
            const toggles = document.querySelectorAll('.tree-toggle');
            toggles.forEach(toggle => {
                if (toggle.dataset.target) {
                    toggle.addEventListener('click', function() {
                        const targetId = this.dataset.target;
                        const targetElement = document.getElementById(targetId);
                        
                        if (targetElement.style.display === 'none') {
                            targetElement.style.display = 'block';
                            this.querySelector('i').classList.remove('fa-chevron-right');
                            this.querySelector('i').classList.add('fa-chevron-down');
                        } else {
                            targetElement.style.display = 'none';
                            this.querySelector('i').classList.remove('fa-chevron-down');
                            this.querySelector('i').classList.add('fa-chevron-right');
                        }
                    });
                }
            });
        }
        
        // 初始化菜单项点击事件
        function initMenuClick() {
            const menuNodes = document.querySelectorAll('.tree-node');
            menuNodes.forEach(node => {
                node.addEventListener('click', function(e) {
                    // 阻止事件冒泡，避免点击复选框时触发菜单选中
                    if (e.target.type === 'checkbox' || e.target.classList.contains('tree-toggle') || e.target.parentElement.classList.contains('tree-toggle')) {
                        return;
                    }
                    
                    // 移除所有菜单项的选中状态
                    menuNodes.forEach(n => n.classList.remove('selected-menu'));
                    
                    // 添加当前菜单项的选中状态
                    this.classList.add('selected-menu');
                    
                    // 获取菜单ID
                    const menuId = this.dataset.menuId;
                    currentMenuId = menuId;
                    
                    // 显示权限配置区域
                    document.getElementById('no-menu-selected').style.display = 'none';
                    document.getElementById('menu-permission-config').style.display = 'block';
                    
                    // 设置选中菜单标题
                    const menuTitle = this.querySelector('label span:not(.custom-checkbox):not(.badge)').textContent;
                    document.getElementById('selected-menu-title').textContent = menuTitle + ' - 权限配置';
                    
                    // 加载操作权限和数据权限
                    loadPermissions(menuId);
                });
            });
        }
        
        // 加载权限数据
        function loadPermissions(menuId) {
            // 加载操作权限
            loadOperationPermissions(menuId);
            
            // 加载数据权限
            loadDataPermissions(menuId);
        }
        
        // 加载操作权限
        function loadOperationPermissions(menuId) {
            const operationBody = document.getElementById('operation-permissions-body');
            const noOperationMsg = document.getElementById('no-operation-permissions');
            
            // 清空现有内容
            operationBody.innerHTML = '';
            
            // 获取当前菜单的操作权限
            const operations = operationPermissions[menuId] || [];
            
            if (operations.length > 0) {
                // 隐藏无数据提示
                noOperationMsg.style.display = 'none';
                
                // 添加操作权限列表
                operations.forEach(op => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="px-4 py-2 whitespace-nowrap">
                            <div class="flex items-center">
                                <span class="font-medium text-gray-900">${op.name}</span>
                            </div>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap">
                            <div class="text-sm text-gray-500">${op.code}</div>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${op.status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${op.status ? '启用' : '禁用'}
                            </span>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap text-right text-sm font-medium">
                            <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="editOperation('${op.id}')">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-900" onclick="deleteOperation('${op.id}')">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                    `;
                    operationBody.appendChild(row);
                });
            } else {
                // 显示无数据提示
                noOperationMsg.style.display = 'block';
            }
        }
        
        // 加载数据权限
        function loadDataPermissions(menuId) {
            const dataBody = document.getElementById('data-permissions-body');
            const noDataMsg = document.getElementById('no-data-permissions');
            
            // 清空现有内容
            dataBody.innerHTML = '';
            
            // 获取当前菜单的数据权限
            const dataPerms = dataPermissions[menuId] || [];
            
            if (dataPerms.length > 0) {
                // 隐藏无数据提示
                noDataMsg.style.display = 'none';
                
                // 添加数据权限列表
                dataPerms.forEach(dp => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="px-4 py-2 whitespace-nowrap">
                            <div class="flex items-center">
                                <span class="font-medium text-gray-900">${dp.name}</span>
                            </div>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap">
                            <div class="text-sm text-gray-500">${dp.code}</div>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${dp.status ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${dp.status ? '启用' : '禁用'}
                            </span>
                        </td>
                        <td class="px-4 py-2 whitespace-nowrap text-right text-sm font-medium">
                            <button class="text-indigo-600 hover:text-indigo-900 mr-2" onclick="editData('${dp.id}')">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-900" onclick="deleteData('${dp.id}')">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>
                    `;
                    dataBody.appendChild(row);
                });
            } else {
                // 显示无数据提示
                noDataMsg.style.display = 'block';
            }
        }
        
        // 初始化表单提交事件
        function initFormSubmit() {
            // 添加菜单表单提交
            document.getElementById('addMenuForm').addEventListener('submit', function(e) {
                e.preventDefault();
                // 这里可以添加表单验证和数据提交逻辑
                alert('菜单添加成功！');
                closeModal('addMenuModal');
            });
            
            // 添加操作权限表单提交
            document.getElementById('addOperationForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (!currentMenuId) {
                    alert('请先选择一个菜单！');
                    return;
                }
                
                const name = document.getElementById('operationName').value;
                const code = document.getElementById('operationCode').value;
                const desc = document.getElementById('operationDesc').value;
                const status = document.querySelector('input[name="operationStatus"]:checked').value;
                
                // 创建新的操作权限对象
                const newOperation = {
                    id: code,
                    name: name,
                    code: code,
                    status: parseInt(status),
                    desc: desc
                };
                
                // 如果当前菜单没有操作权限数组，则创建一个
                if (!operationPermissions[currentMenuId]) {
                    operationPermissions[currentMenuId] = [];
                }
                
                // 添加到操作权限数组
                operationPermissions[currentMenuId].push(newOperation);
                
                // 重新加载操作权限列表
                loadOperationPermissions(currentMenuId);
                
                // 关闭模态框并重置表单
                closeModal('addOperationModal');
                this.reset();
            });
            
            // 添加数据权限表单提交
            document.getElementById('addDataForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                if (!currentMenuId) {
                    alert('请先选择一个菜单！');
                    return;
                }
                
                const name = document.getElementById('dataName').value;
                const code = document.getElementById('dataCode').value;
                const scope = document.getElementById('dataScope').value;
                const desc = document.getElementById('dataDesc').value;
                const status = document.querySelector('input[name="dataStatus"]:checked').value;
                
                // 创建新的数据权限对象
                const newData = {
                    id: code,
                    name: name,
                    code: code,
                    scope: scope,
                    status: parseInt(status),
                    desc: desc
                };
                
                // 如果当前菜单没有数据权限数组，则创建一个
                if (!dataPermissions[currentMenuId]) {
                    dataPermissions[currentMenuId] = [];
                }
                
                // 添加到数据权限数组
                dataPermissions[currentMenuId].push(newData);
                
                // 重新加载数据权限列表
                loadDataPermissions(currentMenuId);
                
                // 关闭模态框并重置表单
                closeModal('addDataModal');
                this.reset();
            });
            
            // 编辑操作权限表单提交
            document.getElementById('editOperationForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const id = document.getElementById('editOperationId').value;
                const name = document.getElementById('editOperationName').value;
                const code = document.getElementById('editOperationCode').value;
                const desc = document.getElementById('editOperationDesc').value;
                const status = document.querySelector('input[name="editOperationStatus"]:checked').value;
                
                // 查找并更新操作权限
                const operations = operationPermissions[currentMenuId] || [];
                const index = operations.findIndex(op => op.id === id);
                
                if (index !== -1) {
                    operations[index] = {
                        id: id,
                        name: name,
                        code: code,
                        status: parseInt(status),
                        desc: desc
                    };
                    
                    // 重新加载操作权限列表
                    loadOperationPermissions(currentMenuId);
                }
                
                // 关闭模态框
                closeModal('editOperationModal');
            });
            
            // 编辑数据权限表单提交
            document.getElementById('editDataForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const id = document.getElementById('editDataId').value;
                const name = document.getElementById('editDataName').value;
                const code = document.getElementById('editDataCode').value;
                const scope = document.getElementById('editDataScope').value;
                const desc = document.getElementById('editDataDesc').value;
                const status = document.querySelector('input[name="editDataStatus"]:checked').value;
                
                // 查找并更新数据权限
                const dataPerms = dataPermissions[currentMenuId] || [];
                const index = dataPerms.findIndex(dp => dp.id === id);
                
                if (index !== -1) {
                    dataPerms[index] = {
                        id: id,
                        name: name,
                        code: code,
                        scope: scope,
                        status: parseInt(status),
                        desc: desc
                    };
                    
                    // 重新加载数据权限列表
                    loadDataPermissions(currentMenuId);
                }
                
                // 关闭模态框
                closeModal('editDataModal');
            });
        }
        
        // 初始化搜索功能
        function initSearch() {
            const searchInput = document.getElementById('menuSearch');
            searchInput.addEventListener('input', function() {
                const searchText = this.value.toLowerCase();
                const menuNodes = document.querySelectorAll('.tree-node');
                
                menuNodes.forEach(node => {
                    const menuText = node.querySelector('label span:not(.custom-checkbox):not(.badge)').textContent.toLowerCase();
                    const parent = node.closest('li');
                    
                    if (menuText.includes(searchText)) {
                        parent.style.display = 'block';
                        
                        // 如果是子菜单，确保父菜单也显示
                        const parentUl = parent.closest('ul');
                        if (parentUl && parentUl.id) {
                            const toggle = document.querySelector(`[data-target="${parentUl.id}"]`);
                            if (toggle) {
                                parentUl.style.display = 'block';
                                toggle.querySelector('i').classList.remove('fa-chevron-right');
                                toggle.querySelector('i').classList.add('fa-chevron-down');
                            }
                        }
                    } else {
                                                // 如果是父菜单，检查子菜单是否有匹配项
                                                const childList = parent.querySelector('ul');
                        if (childList) {
                            const childNodes = childList.querySelectorAll('.tree-node');
                            let hasMatchingChild = false;
                            
                            childNodes.forEach(childNode => {
                                const childText = childNode.querySelector('label span:not(.custom-checkbox):not(.badge)').textContent.toLowerCase();
                                if (childText.includes(searchText)) {
                                    hasMatchingChild = true;
                                    childNode.closest('li').style.display = 'block';
                                } else {
                                    childNode.closest('li').style.display = 'none';
                                }
                            });
                            
                            if (hasMatchingChild) {
                                parent.style.display = 'block';
                                childList.style.display = 'block';
                                const toggle = parent.querySelector('.tree-toggle');
                                if (toggle) {
                                    toggle.querySelector('i').classList.remove('fa-chevron-right');
                                    toggle.querySelector('i').classList.add('fa-chevron-down');
                                }
                            } else {
                                parent.style.display = 'none';
                            }
                        } else {
                            parent.style.display = 'none';
                        }
                    }
                });
                
                // 如果搜索框为空，恢复所有菜单项显示
                if (searchText === '') {
                    const allMenuItems = document.querySelectorAll('.tree-menu li');
                    allMenuItems.forEach(item => {
                        item.style.display = 'block';
                    });
                    
                    // 恢复子菜单的折叠状态
                    const subMenus = document.querySelectorAll('.tree-menu ul');
                    subMenus.forEach(menu => {
                        if (menu.id) {
                            menu.style.display = 'none';
                            const toggle = document.querySelector(`[data-target="${menu.id}"]`);
                            if (toggle) {
                                toggle.querySelector('i').classList.remove('fa-chevron-down');
                                toggle.querySelector('i').classList.add('fa-chevron-right');
                            }
                        }
                    });
                }
            });
        }
        
        // 打开模态框
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
        
        // 添加操作权限按钮点击事件
        function addOperation() {
            if (!currentMenuId) {
                alert('请先选择一个菜单！');
                return;
            }
            
            openModal('addOperationModal');
        }
        
        // 添加数据权限按钮点击事件
        function addData() {
            if (!currentMenuId) {
                alert('请先选择一个菜单！');
                return;
            }
            
            openModal('addDataModal');
        }
        
        // 编辑操作权限
        function editOperation(id) {
            const operations = operationPermissions[currentMenuId] || [];
            const operation = operations.find(op => op.id === id);
            
            if (operation) {
                document.getElementById('editOperationId').value = operation.id;
                document.getElementById('editOperationName').value = operation.name;
                document.getElementById('editOperationCode').value = operation.code;
                document.getElementById('editOperationDesc').value = operation.desc;
                
                if (operation.status === 1) {
                    document.getElementById('editOperationStatusEnable').checked = true;
                } else {
                    document.getElementById('editOperationStatusDisable').checked = true;
                }
                
                openModal('editOperationModal');
            }
        }
        
        // 编辑数据权限
        function editData(id) {
            const dataPerms = dataPermissions[currentMenuId] || [];
            const dataPerm = dataPerms.find(dp => dp.id === id);
            
            if (dataPerm) {
                document.getElementById('editDataId').value = dataPerm.id;
                document.getElementById('editDataName').value = dataPerm.name;
                document.getElementById('editDataCode').value = dataPerm.code;
                document.getElementById('editDataScope').value = dataPerm.scope;
                document.getElementById('editDataDesc').value = dataPerm.desc;
                
                if (dataPerm.status === 1) {
                    document.getElementById('editDataStatusEnable').checked = true;
                } else {
                    document.getElementById('editDataStatusDisable').checked = true;
                }
                
                openModal('editDataModal');
            }
        }
        
        // 删除操作权限
        function deleteOperation(id) {
            document.getElementById('deleteItemId').value = id;
            document.getElementById('deleteItemType').value = 'operation';
            document.getElementById('deleteConfirmText').textContent = '确定要删除该操作权限吗？删除后将无法恢复。';
            
            openModal('deleteConfirmModal');
        }
        
        // 删除数据权限
        function deleteData(id) {
            document.getElementById('deleteItemId').value = id;
            document.getElementById('deleteItemType').value = 'data';
            document.getElementById('deleteConfirmText').textContent = '确定要删除该数据权限吗？删除后将无法恢复。';
            
            openModal('deleteConfirmModal');
        }
        
        // 确认删除
        function confirmDelete() {
            const id = document.getElementById('deleteItemId').value;
            const type = document.getElementById('deleteItemType').value;
            
            if (type === 'operation') {
                // 删除操作权限
                const operations = operationPermissions[currentMenuId] || [];
                const index = operations.findIndex(op => op.id === id);
                
                if (index !== -1) {
                    operations.splice(index, 1);
                    loadOperationPermissions(currentMenuId);
                }
            } else if (type === 'data') {
                // 删除数据权限
                const dataPerms = dataPermissions[currentMenuId] || [];
                const index = dataPerms.findIndex(dp => dp.id === id);
                
                if (index !== -1) {
                    dataPerms.splice(index, 1);
                    loadDataPermissions(currentMenuId);
                }
            }
            
            closeModal('deleteConfirmModal');
        }
        
        // 添加菜单按钮点击事件
        function addMenu() {
            openModal('addMenuModal');
        }
        
        // 全选/取消全选菜单
        function toggleSelectAll(checkbox) {
            const isChecked = checkbox.checked;
            const checkboxes = document.querySelectorAll('.menu-checkbox');
            
            checkboxes.forEach(cb => {
                cb.checked = isChecked;
            });
        }
        
        // 展开/折叠所有菜单
        function toggleExpandAll(button) {
            const isExpanded = button.dataset.expanded === 'true';
            const subMenus = document.querySelectorAll('.tree-menu ul');
            const toggles = document.querySelectorAll('.tree-toggle i');
            
            if (isExpanded) {
                // 折叠所有
                subMenus.forEach(menu => {
                    if (menu.id) {
                        menu.style.display = 'none';
                    }
                });
                
                toggles.forEach(icon => {
                    icon.classList.remove('fa-chevron-down');
                    icon.classList.add('fa-chevron-right');
                });
                
                button.dataset.expanded = 'false';
                button.innerHTML = '<i class="fas fa-expand-alt mr-1"></i>展开所有';
            } else {
                // 展开所有
                subMenus.forEach(menu => {
                    if (menu.id) {
                        menu.style.display = 'block';
                    }
                });
                
                toggles.forEach(icon => {
                    icon.classList.remove('fa-chevron-right');
                    icon.classList.add('fa-chevron-down');
                });
                
                button.dataset.expanded = 'true';
                button.innerHTML = '<i class="fas fa-compress-alt mr-1"></i>折叠所有';
            }
        }
    </script>
</body>
</html>
                